<template>
  <section :class="className">splash</section>
</template>

<script>
  import '../css/splash.scss'
  export default {
    props: [
      'native',
      'debug'
    ],
    data() {
      return {
        className: 'create'
      }
    },
    created() {
      this.$nextTick(() => {
        setTimeout(()=>{
          this.$emit('next', this.createAppSuccess)
        },3000)
      })
    },
    methods: {
      createAppSuccess() {
        const AnimationEnd = () => {
          this.$el.removeEventListener('webkitAnimationEnd', AnimationEnd, false)
          this.close()
        }
        this.className = 'close'
        this.$el.addEventListener('webkitAnimationEnd', AnimationEnd, false)
      },
      close() {
        this.$emit('end')
      }
    }
  }
</script>
